import React, {useState, useEffect, Fragment,useRef,useLayoutEffect} from 'react';
import ReactMarkdown from 'react-markdown';
import Prism from 'prismjs';
import 'prismjs/themes/prism.css';
import 'prismjs/components/prism-sql'
import "./index.less"
import ZanOrCai from "@/pages/NewTalk/zanOrCai";
import styles from "@/components/boncGpt/preSearchComponent/index.less";
import {message} from "antd";
import {connect} from "@@/plugin-dva/exports";
const typingSpeed = 100; // 打字速度，以毫秒为单位
const MarkdownTypewriter = ({item,onOk,markdown,dispatch,handleScroll,bottomScroll,dialogFlag}) => {
  const [lines, setLines] = useState([]);
  const [currentLine, setCurrentLine] = useState(0);
  const [isTyping, setIsTyping] = useState(true); // 控制是否正在打印
  const [scrollStatus, setScrollStatus] = useState(0);
  const [currentMarkdown, setCurrentMarkdown] = useState(0);
  useEffect(() => {
    if(!bottomScroll){
      setScrollStatus(0)
    }
  }, [bottomScroll]);
  function listenScroll(e){
    if(e.deltaY<0){
      setScrollStatus(5)
    }
  }
  useEffect(()=>{
    const handleScroll = (e) => listenScroll(e);
    //监听滚动事件未生效 需要打印看看怎么回事
    window.addEventListener("wheel", handleScroll)
    return ()=>window.removeEventListener("wheel", listenScroll)
  },[])
  useEffect(() => {
    if(!markdown) {
      return message.info("AI取数中sql描述语句不存在")
    }
    // 将Markdown文本分割成多行
    const linesArray = markdown.split('\n');
    setLines(linesArray);
  }, [markdown]);
  useEffect(() => {
    // 设置定时器来模拟打字机效果
    const timer = setInterval(() => {
      if (currentLine < lines.length&&isTyping) {
        setCurrentLine(currentLine + 1);
      } else {
        setIsTyping(false); // 打印完成，停止打印
        clearInterval(timer);
      }
    }, typingSpeed);
    Prism.highlightAll();
    return () => clearInterval(timer); // 清理定时器
  }, [markdown,currentLine, isTyping, typingSpeed,lines]);

  // 提取当前应该显示的文本行
  // const currentMarkdown = lines.slice(0, currentLine).join('\n');
  function postOk(){
    onOk(item)
  }

  useEffect(()=>{
    setCurrentMarkdown(lines.slice(0, currentLine).join('\n'))
  },[currentLine])
  useLayoutEffect(() => {
    if(!scrollStatus){
      handleScroll();
    }
  }, [currentMarkdown]);
  // 处理点击事件，开始或停止打印
  const handleClick = () => {
    if (isTyping) {
      // 如果正在打印，则停止
      setIsTyping(false);
    } else {
      // 如果不在打印，则重新开始打印
      setIsTyping(true);
      setCurrentLine(0); // 重置当前行数为0
    }
  };
  function handleCopy(){
    // 获取要复制的文本
    let text = item.resp?.ai_sql;
    // 创建一个临时的textarea元素
    let tempTextArea = document.createElement("textarea");
    tempTextArea.value = text;
    document.body.appendChild(tempTextArea);

    // 选中临时textarea中的文本并执行复制操作
    tempTextArea.select();
    document.execCommand("copy");
    message.success('复制成功 !');
    // 移除临时textarea元素
    document.body.removeChild(tempTextArea);
  };
  return (
    <div className={styles.markDown}>
      <div>{dialogFlag==="0"?"指标名称：":""}{item.resp.kpi_name}</div>
      <ReactMarkdown style={{backgroundColor: "#fff"}}>{currentMarkdown}</ReactMarkdown>
      <div className={styles.textBtn1} onClick={handleCopy}>复制</div>
      {!item?.codeInformation&&currentMarkdown ? (<div style={{textAlign: 'right'}}>
        <div className={styles.getDataBtn}><span onClick={postOk}>{"点我进行数据生成" + ">>>"}</span></div>
      </div>) : ""}
      <ZanOrCai index={item.index} islike={item.islike} resp={item.resp} question={item.question}
                predictStatus={item.predictStatus} createTime={item.createTime}
                changeStatus={handleClick}
                stop={!isTyping}
                dispatch={dispatch}/>
    </div>
  );
};

export default connect(({intellectAssistant}) => ({
  dialogFlag: intellectAssistant.dialogFlag,
}))(MarkdownTypewriter);
